<template>
  <div class="set-back" v-bind:style="{height:this.windowHeight+'px'}">
   <div class="login-layout">
     <!-- 注册div -->
       <div class="form-div">
         <!-- 注册界面的logo -->
         <p style="text-align: center;margin: 10px 0;">
           <img src="../../../static/logo.fe46111.fe46111.png" style="width: 50%;"/>
         </p>

         <!-- from表单数据   注册 -->
         <form>
           <p class="from-font-style">邮箱</p>
           <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
           <p class="from-font-style">密码</p>
           <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
           <p class="from-font-style">密码</p>
           <el-input placeholder="请再次输入密码" v-model="user.password2" show-password></el-input>
           <el-button type="primary" @click="RegisterClick">注册</el-button>
         </form>
       </div>
          <!-- 分割线 -->
         <el-divider></el-divider>
         <p class="from-link">
           <!-- 返回登陆跳转 -->
           <a>
             <router-link to="/user/login">返回登陆</router-link>
           </a>
         </p>
      </div>
  </div>
</template>

<script>
  import UserApi from '@/api/user.js'
  import Validate from '@/utils/validate.js'
  import mixins from '@/mixins.js'
  export default {
    mixins:[mixins],
    data() {
      return {
        activeName: 'second',
        windowHeight:0,
          //用户对象
        user:{
          email:'',
          password:'',
          password2:''
        },
        ip:''
      };
    },
    methods: {
      RegisterClick(){
        let _this=this;
        console.log(_this.ip)
        // 判断账号密码是否为空
        if(_this.user.email==='' || _this.user.password==='' || _this.user.password2===''){
          // 账号密码不能为空
          _this.$message({
            showClose: true,
            message:"账号或密码不能为空",
            type:'error',
            center: true
          })
        }else if(!Validate.validateEmail(_this.user.email)){   //调用正则表达式进行邮箱格式验证
          _this.$message({
            showClose: true,
            message:"请输入正确的邮箱",
            type:'error',
             center: true
          })
        }else if(_this.user.password!=_this.user.password2){    // 判断两次账号密码是否一致
          _this.$message({
            showClose: true,
            message:"两次密码不一致",
            type:'error',
            center: true
          })
        }else{
          //获取ip  通过mixins 里面的Ip
          var ipAddress = _this.Ip
          //发送请求
          UserApi.userRegister(_this.user.email,_this.user.password,ipAddress).then(respose =>{
            if(respose.data.isSuccess){
              _this.$message({
                showClose: true,
                message:respose.data.info,
                type:'success',
                center: true
              })
              // 登陆成功跳转到登陆页面
              this.$router.push({
                path:'/user/login'
              })
            }else{
              _this.$message({
                showClose: true,
                message:respose.data.info,
                type:'error',
                center: true
              })
            }
          })
        }
      }
    },
    created() {
        // 获取window.innerHeight ：浏览器内页面可用高度
        //让背景图片布满整个频幕
        this.windowHeight=window.innerHeight;
    },
    mounted() {

    }
  };
</script>

<style scoped="scoped">
  /*背景模糊*/
  .set-back{
      width:100%;
      height:100%;
      position: relative;
      background-size: 100% 100%;
      background-image: url(../../../static/1.jpg);
      padding:1px;
      box-sizing:border-box;
      z-index:1;
  }
  .set-back:after{
      content: "";
      width:100%;
      height:100%;
      position: absolute;
      left:0;
      top:0;
      background: inherit;
      filter: blur(4px);
      z-index: 2;
  }
  .login-layout{
      /* width: 40%; */
      width: 450px;
      /* margin:0 auto; */
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index:11;
      background: inherit;
      opacity: 0.8;
      box-shadow:  0 0 10px 6px rgba(0,0,0,.5);
  }

  .el-button{
    position: relative;
    width: 100%;
    margin-top: 15px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, 50%);
  }
  .form-div{
    height: auto;
    padding: 40px;
    color: white;
  }

  .from-font-style{
    margin: 16px 0 8px;
    font-size: 16px;
  }
  .from-link{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }

  .from-link a{
    color: #DCDFE6;
    font-size: 14px;
  }
</style>
